@use "sass:math";

$scale-mobile: 2;

$wid-mobile: 375*$scale-mobile;
$hei-mobile: 584*$scale-mobile;
$wid-phone: 386;
$hei-phone: 770;

.edit-component-con {
	position: absolute;
	left: 0;
	top: 0;
	right: 300px;
	bottom: 10px;
	overflow-y: auto;
	background-color: #fbfbfb;

	.standard-line{
		position: absolute;
		top: 786px;
		border-bottom: 2px solid #127bff;
		width: 100%;
	}

	.btn-add-minus-con{
		position: fixed;
		bottom: 60px;
		right: 370px;
		font-size: 16px;
		width: 89px;
		height: 30px;
	}
	.btn-add, .btn-minus{
		height: 30px;
		line-height: 30px;
		padding: 10px 18px;
		margin: 0;
	}
	.btn-add{
		border-radius: 24px;
		border: solid 1px #a5afbe;
		border-right: 0;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
	.btn-minus{
		border-radius: 24px;
		border: solid 1px #a5afbe;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
	.btn-add.active, .btn-minus.active{
		background-color: #1077ed;
		color: #fff;
		border: 1px solid #1077ed;
	}

	.align-con{
		position: fixed;
		top: 70px;
		right: 320px;
		width: 40px;
		border-radius: 2px;
		box-shadow: 0 4px 4px 0 rgba(18, 123, 255, 0.1);
		background-color: #ffffff;
		li{
			width:100%;
			height:40px;
			i{
				display:block;
				width:100%;
				height:100%
			}
		}
	}
	.right-menu-con{
		position: absolute;
		width: 260px;
		height: 550px;
		border-radius: 4px;
		box-shadow: 0 8px 8px 0 rgba(18, 123, 255, 0.5);
		background-color: #ffffff;
		border: 1px solid #f3f5fa;
		font-size: 24px;
		z-index: 1000;

		h3{
			background-color: #127bff;
			padding: 12px 20px;
			color: #fff;
		}
		ul{
			padding: 0 20px;
			li{
				margin: 20px 0;
				color: #43475c;
				span{
					display: inline-block;
					width: 160px;
				}
			}
		}
	}
	.keyboard-con{
		position: fixed;
		bottom: 110px;
		left: 220px;
		width: 240px;
		height: 320px;
		border-radius: 2px;
		box-shadow: 0 4px 4px 0 rgba(18, 123, 255, 0.1);
		background-color: #ffffff;
		font-size: 12px;

		h3{
			background-color: #127bff;
			padding: 6px 10px;
			color: #fff;
		}
		ul{
			padding: 0 10px;
			li{
				margin: 10px 0;
				color: #43475c;
				span{
					display: inline-block;
					width: 60px;
				}
			}
		}
	}
	.btn-keyboard{
		position: fixed;
		bottom: 60px;
		left: 220px;
		font-size: 26px;
		color: #a5afbe;
	}
	.btn-keyboard i, .btn-keyboard p{
		color: inherit;
		font-size: inherit;
	}
	.btn-keyboard.active{
		color: var(--color-blue);
	}
	.btn-keyboard p{
		font-size: 12px;
	}
	.drag-edit-zone-mobile {
		outline: none;
		margin: 10px auto;
		width: $wid-phone + px;
		height: $hei-phone + px;
		overflow: hidden;
		padding-left: math.div(($wid-phone -  math.div($wid-mobile,$scale-mobile)),2) + px;
		padding-top:  math.div(($hei-phone - math.div($hei-mobile,$scale-mobile)),2) + px;

		.drag-edit-zone-style {
			box-shadow: 0 0 10px rgba(0, 0, 0, .4);
			outline: none;
			position: relative;
			transform-origin: 0 0;
			width: inherit;
			height: inherit;
		}
	}
  .copy-site-data-con {
    position: absolute;
    top: 20px;
    width: 100%;
    height: 100%;
    z-index: 1000;

    textarea {
      width: 100%;
      height: 400px;
    }
  }
}
